<template>
  <TabContainer  :btn1-callback="save" :btn2-callback="cancel">
    <table style="width: 100%">
      <thead>
        <tr class="row">
          <th class="col-4">Task</th>
          <th class="col-5">Result</th>
          <th class="col-3"></th>
        </tr>
      </thead>

      <tbody>
        <tr
          v-for="(item, index) in filterRows"
          :key="index"
          class="cursor-pointer row"
          style="text-align: center"
        >
          <td class="col-4">
            <div class="q-pa-sm">
              {{ item.stock_code }}
            </div>
          </td>
          <td class="col-5">
            <div class="q-pa-sm">
              <div class="q-gutter-sm">
                <q-radio size="xs" v-model="pass" val="pass" label="Pass" />
                <q-radio size="xs" v-model="fail" val="fail" label="Fail" />
                <q-radio size="xs" v-model="na" val="na" label="N/A" />
              </div>
            </div>
          </td>
          <td class="col-3">
            <div class="q-pa-sm">
              <q-btn style="font-size: 12px" @click="$router.push(`/visualInspection/${item.id}`)">E-form</q-btn>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </TabContainer>
</template>

<script setup lang="ts">
import TabContainer from '../container/TabContainer.vue';
import { computed, ref } from 'vue';
const pass = ref('pass');
const fail = ref('fail');
const na = ref('na');
const isComplete = ref(true);

const data = [
  {
    id: 1,
    stock_code: '681700085',
    serial_number: 'SN12345',
    status: 'danger',
  },
  {
    id: 2,
    stock_code: '681700085',
    serial_number: 'SN12345',
    status: 'missing',
  },
  {
    id: 2,
    stock_code: '681700085',
    serial_number: 'SN12345',
    status: 'missing',
  },
  {
    id: 2,
    stock_code: '681700085',
    serial_number: 'SN12345',
    status: 'missing',
  },
  {
    id: 2,
    stock_code: '681700085',
    serial_number: 'SN12345',
    status: 'missing',
  },
  {
    id: 2,
    stock_code: '681700085',
    serial_number: 'SN12345',
    status: 'missing',
  },
  {
    id: 2,
    stock_code: '681700085',
    serial_number: 'SN12345',
    status: 'missing',
  },
  {
    id: 2,
    stock_code: '681700085',
    serial_number: 'SN12345',
    status: 'missing',
  },
  {
    id: 2,
    stock_code: '681700085',
    serial_number: 'SN12345',
    status: 'missing',
  },
  {
    id: 3,
    stock_code: '681700085',
    serial_number: 'SN12345',
    status: 'missing',
  },
];

const rows = ref(data);
const filterRows = computed(() => {
  return rows.value;
});

function save() {
  console.log('save');
}

function cancel() {
  console.log('cancel');
}
</script>
<style scoped>
table {
  border-collapse: collapse;
  table-layout: fixed;
}

td {
  padding: 0.5rem;
}
</style>
